</React.StrictMode>,

document.getElementById('root')

);

The last line reportWebVitals() has comments:

Analyze Code

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

This however is out of the scope of this book and we can safely leave the code as it is.[DCB1][JL2]

App.js is the main React code that we display on the page.

App.js

Analyze Code

import logo from './logo.svg';

import './App.css';

function App() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

</div>

);

}

export default App;

Note: any element that has an HTML class attribute is using className for that property instead of class. Since

class is a reserved word in Javascript, we have to use className to define the class attribute of an HTML element.

In the above, we have a functional-based component called App. Every React application has at least one

component: the root component, named App in App.js. The App component controls the view through the JSX

template it returns:

Analyze Code

return (

<div className="App">

…

</div>

);

A component has to return a single React element. In our case, App returns a single <div />. The element can be a

representation of a native DOM component, such as <div />, or another composite component that you've defined

yourself.

Components can either be functional based or class based. We will talk more on this later, but as a starter, what we

have in App is a functional-based component as seen from its header function App().

Add React bootstrap framework:

We will use React bootstrap to make our UI look more professional. React Bootstrap (https://react-

bootstrap.github.io) is a library of reusable frontend components that contain JSX based templates to help build user

interface components (like forms, buttons, icons) for web applications.

To install React bootstrap, go to the ‘frontend’ folder, and in the Terminal, run:

Execute in Terminal

npm install react-bootstrap bootstrap